import { useEffect, useState } from "react";
import "./dialog.scss";
import classNames from "classnames";
interface DialogProps {
  children: React.ReactNode | React.ReactElement;
  isOpen: boolean;
  onClose?: () => void;
  isAllowOutSideClick?: boolean;
  color?: string;
  className?: string;
}

export const Dialog = ({
  children,
  isOpen,
  onClose,
  isAllowOutSideClick = true,
  color,
  className,
  ...rest
}: DialogProps) => {
  const [dialogclassName, setDialogClassName] = useState("none");
  useEffect(() => {
    if (isOpen) {
      setDialogClassName("opacity");
      setTimeout(() => {
        setDialogClassName("show");
      }, 50);
    } else {
      setDialogClassName("opacity");
      setTimeout(() => {
        setDialogClassName("none");
      }, 300);
    }
  }, [isOpen]);

  const dialogClassName = (): string => {
    return classNames(
      "dashboard_dialog",
      isAllowOutSideClick && "disable",
      dialogclassName,
      onClose && "action"
    );
  };

  const handleClose = () => {
    onClose?.();
  };
  return (
    <>
      <div
        className={dialogClassName()}
        onClick={() => handleClose()}
        {...rest}
      >
        <div
          className={`dashboard_dialog_main ${className}`}
          onClick={(e) => e.stopPropagation()}
        >
          {children}
        </div>
      </div>
    </>
  );
};
